import classNames from 'classnames';
import React, { ReactNode } from 'react';

import styles from './index.module.scss';

// 给input组件添加类型,动态显示内容

// 把type改成interface, 继承input原生属性
interface InputProps
  extends React.DetailedHTMLProps<
    React.InputHTMLAttributes<HTMLInputElement>,
    HTMLInputElement
  > {
  extra?: ReactNode;
  errorMsg?: string;
  className?: string;

  // 定义剩余属性类型  索引签名类型(代表任意类型)
  // 继承了原生的input类型,不用写索引签名类型
  // [key: string]: any;
}

export default function Input(props: InputProps) {
  // 添加剩余属性
  const { extra, errorMsg, className, ...restprops } = props;
  return (
    <div className={styles.root}>
      <div className="input-box">
        {/*给input透传剩余属性 */}
        <input className={classNames('input', className)} {...restprops} />

        <div className="validate">{errorMsg}</div>
        {extra && <div className="extra">{extra}</div>}
      </div>
    </div>
  );
}
